/* 0410
 * 1.什么是dom
 * DOM（文档对象模型）：DOM 定义了访问和操作HTML文档的标准方法。
   js通过dom可以任意访问页面上的标签，即页面上标签文本的获取和修改。
 * js通过dom可以动态添加/删除页面上的标签；
 * js通过dom可以获取和设置页面上标签的属性
 *2.DOM 节点类型
 * 文档节点：整个文档是一个文档节点 ，即document
 * 元素节点：任何一个 HTML 标签是一个元素节点 
 * 文本节点：包含在 HTML 元素中的文本是文本节点 
 * 属性节点：每一个 HTML 属性是一个属性节点 
 * 注释节点：注释属于注释节点 
 * 注意：文本节点和属性节点都是从属于元素节点的！！！
*/
//   3.获取元素节点
// 3.1 获取单一的元素节点
/*document.getElementById('one'):选择id等于指定的一个标签*/
//document.getElementById('one').className='cool'

//3.2 获取元素节点数组
//document.getElementByTagName('标签名')：选择指定标签名的一些html标签
//document.getElementByClassName('hot')：选择class属性等于指定值的一些html标签
//document.getElementByName('sex')：选择name属性等于指定值的一些html标签,
//多用于单选框和复选框。

/*var nodes=document.getElementsByClassName('hot');
nodes[3].className='gray'
alert('选了'+nodes.length+'个li')*/

/*4.获取/设置标签的文本 重点！！！
 * 表单项目
 * 		.value 
 * 非表单项目
 * 		.innerHTML 文本里带有标签，设置文本时会解析标签
 * 		.innerText 文本里不带有标签，设置文本时不会解析标签
 * 
*/
document.getElementById('subBut1').onclick=getName;

function getName(){
	alert(document.getElementById('name1').value);
}
/*5.获取/设置属性
 *className 获取/设置class属性
 *getAttribute(属性名):获取属性的值
 *setAttribute(属性名，属性值):设置属性的值
 *removeAttribute(属性名):删除属性以及属性的值
 *
 * */

/*document.getElementById('one').className='cool'
alert(document.getElementById('two').className)*/
//document.getElementById('two').setAttribute('class','gray');

/*//6.添加节点（5步）
//a，创建新的 <li> 元素：
var element = document.createElement("li");
//b，文本节点。
var node = document.createTextNode("樱桃");
//c，元素节点上追加文本节点：
element.appendChild(node);
//d，找到插入的父节点
var fatherElement=document.getElementsByTagName('ul')[0];
//e，父节点追加子元素
fatherElement.appendChild(element);

//7.删除节点(3步)
//a，先找到父节点
var parent=document.getElementsByTagName('ul')[0];
//b，找到要删除的节点
var child=document.getElementById("three");
//c，从父节点中把子节点删除
parent.removeChild(child); 
 * */ 








